<template>
  <div class="container">
    <image src="./images/bg.png" style="width: 177rpx; height: 177rpx"> </image>
    <text
      style="
        font-size: 40rpx;
        font-weight: 500;
        color: #333333;
        margin-top: 40rpx;
        line-height: 50rpx;
      "
      >青少年模式{{ userInfo.teen_status == "0" ? "已关闭" : "已开启" }}</text
    >
    <view style="margin-top: 56rpx">
      <view
        style="
          font-size: 26rpx;
          font-family: Helvetica;
          color: #747474;
          line-height: 31rpx;
          margin-bottom: 26rpx;
        "
      >
        在此模式下，只能阅读适合未成年人阅读的漫画，并且有以下限制:
      </view>
      <view
        v-for="item in List"
        :key="item.label"
        style="display: flex; margin-bottom: 16rpx"
      >
        <!-- <image
          :style="{ ...item.styles, marginRight: '20rpx' }"
          :src="item.icon"
        ></image> -->
        <view style="display: flex; flex-direction: column">
          <text
            style="
              font-size: 28rpx;
              font-family: Helvetica;
              color: #333333;
              line-height: 41rpx;
            "
            >{{ item.label }}</text
          >
          <!-- <text style="font-size: 26rpx; color: #333333; line-height: 37rpx">{{
            item.value
          }}</text> -->
        </view>
      </view>
      <view style="display: flex; flex-direction: column; margin-top: 56rpx">
        <text
          style="
            font-size: 26rpx;
            font-family: Helvetica;
            color: #747474;
            line-height: 37rpx;
          "
        >
          使用方法：
        </text>
        <text
          style="
            font-size: 28rpx;
            font-family: Helvetica;
            color: #333333;
            line-height: 46rpx;
            margin-top: 22rpx;
          "
        >
          开启青少年模式需要设置独立四位密码，用户需要牢记密码，如果忘记可通过申诉重置密码，需要输入密码关闭青少年模式
        </text>
      </view>
    </view>

    <wButton
      :componentStyle="{
        borderRadius: '43rpx',
        fontWeight: '500',
        marginTop: '60rpx',
        height: '86rpx',
      }"
      fontColor="#fff"
      bgColor="linear-gradient(270deg, #4DCBA5 0%, #6BD6B5 100%)"
      class="wbutton"
      :text="(userInfo.teen_status == '0' ? '开启' : '关闭') + '青少年模式'"
      @click="onStart"
    ></wButton>
    <!-- <wButton
      :componentStyle="{
        borderRadius: '43rpx',
        fontWeight: '500',
        marginTop: '20rpx',
        marginBottom: '20rpx',
        height: '86rpx',
      }"
      fontColor="#000"
      bgColor="#fff"
      class="wbutton"
      text="修改密码"
      @click="open('/pages/ucenter/teenager/changePsdStepOne')"
    ></wButton> -->
  </div>
</template>
<script>
import wButton from "@/components/watch-login/watch-button.vue"; //button
import w_md5 from "../../../js_sdk/zww-md5/w_md5.js";

export default {
  data() {
    return {
      List: [
        {
          label: "·不能开通会员",
          icon: require("../../../static/teenager/content.png"),
          value: "系统将仅向您推荐适合青少年阅读的作品。",
          styles: {
            width: "44rpx",
            height: "42rpx",
          },
        },
        {
          label: "·不能充值金币月票和参与相关消费类活动",
          icon: require("../../../static/teenager/password.png"),
          value: "单日使用时长超过40分钟，需输入密码才能继续使用。",
          styles: {
            width: "43rpx",
            height: "48rpx",
          },
        },
        {
          label: "·不能在每天22:00-次日06:00之",
          icon: require("../../../static/teenager/time.png"),
          value: "每日22:00至次日6:00期间需输入密码才能继续使用。",
          styles: {
            width: "41rpx",
            height: "48rpx",
          },
        },
        {
          label: "·屏蔽了和付费阅读、充值、漫画打赏等相关",
          icon: require("../../../static/teenager/pay.png"),
          value: "屏蔽了和付费阅读、充值、漫画打赏等相关的功能。",
          styles: {
            width: "42rpx",
            height: "42rpx",
          },
        },
      ],
      userInfo: {},
    };
  },
  components: {
    wButton,
  },
  methods: {
    onStart() {
      uni.navigateTo({
        url:
          "/pages/ucenter/teenager/" +
          (this.userInfo.teen_status == "0" ? "verify" : "close"),
      });
    },
    open(url) {
      uni.navigateTo({
        url,
      });
    },
    get_userinfo() {
      var time = new Date().getTime();
      this.app_key = getApp().globalData.websiteKey;

      var param =
        "deviceid=" +
        getApp().globalData.deviceid +
        "&facility=" +
        getApp().globalData.facility +
        "&timestamp=" +
        time +
        "&user_id=" +
        uni.getStorageSync("user").uid +
        "&user_token=" +
        uni.getStorageSync("user").utoken;

      var sign = w_md5.hex_md5_32Upper(param + this.app_key);
      uni.request({
        url:
          getApp().globalData.websiteUrl +
          "/index.php/appv1/user/index?" +
          param +
          "&sign=" +
          sign,
        success: (res) => {
          console.log("用户信息：", res.data);
          this.userInfo = res.data.user;
          const { teen_pass, teen_status } = this.userInfo;
          uni.setStorageSync(
            "teenData",
            JSON.stringify({
              teen_pass,
              teen_status,
            })
          );
        },
      });
    },
  },
  onShow() {
    // const value = uni.getStorageSync("teenData");
    // this.userInfo = JSON.parse(value);
    // console.log(this.userInfo);
    this.get_userinfo();
  },
};
</script>
<style lang="scss">
.container {
  padding: 0 32rpx;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>
